'use client'

import { useState } from 'react'
import Image from 'next/image'

export default function FloatingContact() {
  const [showQR, setShowQR] = useState(false)

  return (
    <>
      <div className="fixed right-5 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2">
        {/* 服务热线 */}
        <a
          href="tel:13510099385"
          className="w-14 h-14 bg-primary text-white rounded flex flex-col items-center justify-center hover:bg-primary-dark transition-colors cursor-pointer group relative"
        >
          <svg
            className="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
            />
          </svg>
          <span className="text-xs mt-1">热线</span>
          
          {/* 悬浮提示 */}
          <div className="hidden group-hover:block absolute right-16 top-1/2 -translate-y-1/2 bg-white text-gray-800 px-3 py-2 rounded shadow-lg whitespace-nowrap">
            点击拨打: 13510099385
          </div>
        </a>

        {/* 微信二维码 */}
        <div
          className="w-14 h-14 bg-primary text-white rounded flex flex-col items-center justify-center hover:bg-primary-dark transition-colors cursor-pointer relative"
          onClick={() => setShowQR(true)}
        >
          <svg
            className="w-6 h-6"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M8.2 13.3c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm7.6 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm-8.1-4.3c.5 0 .9.4.9.9s-.4.9-.9.9-.9-.4-.9-.9.4-.9.9-.9zm7.6 0c.5 0 .9.4.9.9s-.4.9-.9.9-.9-.4-.9-.9.4-.9.9-.9zm3.7.9c0-4.4-4.3-7.9-9.6-7.9S0 5.5 0 9.9c0 2.2 1.1 4.2 2.9 5.6-.2.6-.6 1.6-1 2.7-.2.5.2 1.1.7.9 2-.8 3.1-1.2 3.5-1.3.9.2 1.9.3 2.9.3 5.3 0 9.6-3.5 9.6-7.9z"/>
          </svg>
          <span className="text-xs mt-1">微信</span>
        </div>

        {/* 返回顶部 */}
        <div
          className="w-14 h-14 bg-gray-600 text-white rounded flex flex-col items-center justify-center hover:bg-gray-700 transition-colors cursor-pointer"
          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M5 10l7-7m0 0l7 7m-7-7v18"
            />
          </svg>
          <span className="text-xs mt-1">TOP</span>
        </div>
      </div>

      {/* 二维码弹窗 - 移到根级别并增加宽度 */}
      {showQR && (
        <div
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
          onClick={() => setShowQR(false)}
        >
          <div
            className="relative bg-white p-8 rounded-lg w-[90%] max-w-md mx-auto"
            onClick={e => e.stopPropagation()}
          >
            <button
              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
              onClick={() => setShowQR(false)}
            >
              <svg
                className="w-6 h-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
            <div className="text-center mb-6">
              <h3 className="text-xl font-bold text-gray-900">扫码添加微信</h3>
              <p className="text-sm text-gray-500 mt-2">了解更多产品信息</p>
            </div>
            <div className="relative w-full aspect-square max-w-sm mx-auto bg-gray-50 p-4 rounded-lg">
              <Image
                src="/images/wechat-qr.jpg"
                alt="微信二维码"
                fill
                className="object-contain p-2"
              />
            </div>
          </div>
        </div>
      )}
    </>
  )
}
